<template>
  <div class="container">
    <div class="clearfix">
      <span>模板配置页</span>
      <span class="r">
        <!--<el-button class="pan-btn green-btn sm-btn" size="small" v-if="msgInfoStatus == 0">发布</el-button>-->
        <!--<el-button class="pan-btn red-btn sm-btn" size="small">删除</el-button>-->
        <el-button class="r pan-btn green-btn sm-btn"
                   size="small"
                   icon="el-icon-refresh"
                   @click="refresh"></el-button>
      </span>
    </div>
    <div class="con clearfix">
      <div class="con-left l">
        <el-tabs v-model="pageModel"
                 type="card"
                 @tab-click="handleClick">
          <el-tab-pane label="信息编辑"
                       name="msgEdit">
            <msgEdit v-bind:json="json"
                     v-on:listenMsgEdit="MsgEditData"></msgEdit>
          </el-tab-pane>
          <el-tab-pane label="条件设置"
                       v-if="hideSetFlag"
                       name="condtion">
            <condition v-bind:json="json"></condition>
          </el-tab-pane>
          <el-tab-pane label="奖品设置"
                       v-if="hideSetFlag"
                       name="prizeSet">
            <prizeModel v-on:listenPrizeEdit="prizeListEdit"
                        v-bind:json="json"></prizeModel>
          </el-tab-pane>
          <el-tab-pane label="图片设置"
                       v-if="hideSetFlag"
                       name="imgSet">
            <imgSet v-bind:json="json"></imgSet>
          </el-tab-pane>
          <el-tab-pane label="奖品列表"
                       v-if="hideSetFlag"
                       name="prizeList">
            <prizeList v-on:listenPrizeEdit="prizeListEdit"
                       v-bind:json="json"></prizeList>
          </el-tab-pane>
            <el-tab-pane label="微信设置" v-if="hideSetFlag" name="wechatConfig">
                <wechatConfig v-bind:json="json"></wechatConfig>
            </el-tab-pane>
        </el-tabs>
      </div>
      <div class="con-right r"></div>
    </div>
  </div>
</template>
<script>
import { param2Obj } from '@/utils/index'
import msgEdit from '@/views/components/template-components/msgEdit'
import condition from '@/views/components/template-components/condition'
import prizeModel from '@/views/components/template-components/prizeModel'
import imgSet from '@/views/components/template-components/imgSet'
import prizeList from '@/views/components/template-components/prizeList'
import wechatConfig from '@/views/components/template-components/wechatConfig';

export default {
  name: 'prizeclaw',
  data() {
    return {
      hideSetFlag: false,
      msgInfoStatus: null,
      modelName: '',
      pageModel: 'msgEdit',
      json: { // /////////用于子组件获取数据
        activityId: '',
        templateId: '',
        pageModel: 'msgEdit',
        prizeId: '',
        editFlag: false,
        templateMark: ''
      }
    }
  },
  props: ['templateMark'],
  mounted() {
    this.modelName = param2Obj(window.location.href).name
    this.json.templateId = param2Obj(window.location.href).templateId
    this.json.activityId = param2Obj(window.location.href).activityId
    this.json.prizeId = param2Obj(window.location.href).prizeId
    this.json.editFlag = param2Obj(window.location.href).editFlag
    this.json.templateMark = param2Obj(window.location.href).type
  },
  components: {
    msgEdit,
    condition,
    prizeModel,
    imgSet,
    prizeList,
      wechatConfig,
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
      this.json.pageModel = tab.name
      /*
      * 奖品 tab 切换
      * 奖品配置内容一样  即  form  提交一样 内容一样
      * */
    },
    MsgEditData(data) {
      this.hideSetFlag = data.hideSetFlag
      this.json.activityId = data.activityId
      this.pageModel = data.pageModel
      this.json.pageModel = data.pageModel
    },
    prizeListEdit(data) {
      this.pageModel = data.pageModel
      this.json.prizeId = data.prizeId
      this.hideSetFlag = data.hideSetFlag
      this.json.pageModel = 'prizeSet'
    },
    refresh() {
      this.$router.go(0)
    }
  }
}
</script>
<style>
.inline-form .el-form-item__content {
  width: 210px;
}
.img-label .el-form-item__content {
  width: 500px;
}

.con-left {
  width: 70%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
